<template>
  <headVue name="分类"></headVue>
  <main>
    <van-sidebar v-model="active" class="sidenav">
      <van-sidebar-item
        :title="item"
        v-for="(item, index) in CategoryList"
        :key="index"
        @click="leap(item)"
      />
    </van-sidebar>
    <ul class="ul-right">
      <li v-for="(item, index) in detaila" :key="index">
        {{ item.item }}
        <hr />
        <van-grid :column-num="4">
          <van-grid-item
            v-for="value in item.message"
            :key="value"
            :text="value"
            @click="toCheck"
          />
        </van-grid>
      </li>
    </ul>
  </main>
</template>

<script lang="ts" setup>
import headVue from "@/components/head.vue";

import inputVue from "@/components/input.vue";
import { getCategory } from "@/api/home";
import { getDetail } from "@/api/category";
import { ref } from "vue";
import {useRouter} from 'vue-router'
const $router = useRouter()
const active = ref(0);
const CategoryList: any = ref("");
getCategory().then((res: any) => {
  CategoryList.value = res;
});
const detaila: any = ref("");
// 初始化
getDetail({
  id: "禽畜肉蛋",
}).then((res: any) => {
  if (res) {
    detaila.value = res[0].data;
  }
});
//点击对应渲染
function leap(n: string) {
  getDetail({
    id: n,
  }).then((res: any) => {
    if (res) {
      detaila.value = res[0].data;
    }
  });
}
function toCheck(){
 $router.push('/categoryPro')
  
}
</script>
<style scoped>
.van-sidebar-item--select:before {
  background: #1a9956;
}
ul {
  color: black;
  margin-top: 0rem;
  font-size: 16px;
}
main {
  display: flex;
  justify-content: space-between;
}
.sidenav {
  width: 100px;
}
.ul-right {
  flex: 1;
  overflow: auto;
}
.children-li {
  float: left;

  border: 1px gray solid;
  text-align: center;
}
.ul-right > li {
  width: 100%;
  display: block;
  margin-left: 0;
  padding-left: 10px;
}
.children-li {
  display: block;
}
</style>